<template>
    <div id="User">
        <article>
            <h2>修改用户资料</h2>
            <el-tabs v-model="activeName" type="card">
                <el-tab-pane label="修改昵称" name="1">
                    <el-form
                        :model="userForm"
                        ref="userForm"
                        label-width="100px"
                    >
                        <el-form-item label="原昵称：">
                            {{ userInfo.nickname }}
                        </el-form-item>
                        <el-form-item label="新昵称：" prop="user">
                            <el-input v-model="userForm.nickname"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="nicknameUpdate"
                                >确认修改</el-button
                            >
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="修改用户名" name="first">
                    <el-form
                        :model="userForm"
                        :rules="rules"
                        ref="userForm"
                        label-width="100px"
                    >
                        <el-form-item label="原用户名：">
                            {{ userInfo.username }}
                        </el-form-item>
                        <el-form-item label="新用户名：" prop="user">
                            <el-input v-model="userForm.user"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="userNameUpdate"
                                >确认修改</el-button
                            >
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="修改密码" name="second">
                    <el-form
                        :model="passForm"
                        :rules="rules"
                        ref="passForm"
                        label-width="100px"
                    >
                        <!-- <el-form-item label="原密码">
              <el-input type="password" v-model="passForm.oldPass"></el-input>
            </el-form-item> -->
                        <el-form-item label="新密码" prop="pass">
                            <el-input
                                type="password"
                                v-model="passForm.password"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="确认新密码" prop="pass2">
                            <el-input
                                type="password"
                                v-model="passForm.password2"
                            ></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="passUpdate"
                                >确认修改</el-button
                            >
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="修改头像" name="third">
                    <el-alert
                        title="点击 + 选择图片自动上传修改"
                        type="warning"
                    >
                    </el-alert>
                    <el-upload
                        class="avatar-uploader"
                        :action="`${baseURL}/changeheadsculpture`"
                        :headers="headers"
                        :show-file-list="false"
                        :with-credentials="true"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                    >
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-tab-pane>
            </el-tabs>
        </article>
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import qs from "qs";

export default {
    name: "User",
    data() {
        return {
            activeName: "1",
            baseURL: "http://localhost:8081/ts/user/api",
            headers: { token: localStorage.getItem("token") || "" },
            userForm: {
                user: "",
                nickname: "",
            },
            passForm: {
                oldPass: "",
                password: "",
                password2: "",
            },
            rules: {
                //验证用户名
                user: [
                    {
                        validator(rule, value, callback) {
                            let reg = /^[^\s]{2,8}$/;

                            if (reg.test(value)) {
                                callback();
                            } else {
                                callback(new Error("2-8位非空格字符"));
                            }
                        },
                        trigger: "blur",
                    },
                ],
                password: [
                    {
                        validator(rule, value, callback) {
                            let reg = /^[\w,.?;<>/|\\:'"!@#$%^&*()+-]{6,16}$/;
                            if (reg.test(value)) {
                                callback();
                            } else {
                                callback(new Error("6-16位字符"));
                            }
                        },
                        trigger: "blur",
                    },
                ],
                password2: [
                    {
                        validator: (rule, value, callback) => {
                            if (!value) {
                                callback(new Error("密码不能为空"));
                            } else if (value !== this.passForm.pass) {
                                callback(new Error("两次输入密码不一致"));
                            } else {
                                callback();
                            }
                        },
                        trigger: "blur",
                    },
                ],
            },
            imageUrl: "",
        };
    },
    computed: {
        ...mapState(["userInfo"]),
    },
    methods: {
        ...mapMutations(["userUpdate", "updateUser"]),

        nicknameUpdate() {
            if (this.userForm.nickname === "")
                return this.$message.warning("不能为空");
            this.$axios({
                method: "post",
                url: "http://localhost:8081/ts/user/saveprofilechange",
                headers: { token: localStorage.getItem("token") || "" },
                data: qs.stringify({
                    ...this.userInfo,
                    nickname: this.userForm.nickname,
                }),
            }).then((res) => {
                this.$message.success("修改成功");
                this.updateUser(res.data.respData);
                this.userForm.nickname = "";
            });
        },
        userNameUpdate() {
            this.$refs.userForm.validate(async (v) => {
                if (v) {
                    this.$axios({
                        method: "post",
                        url: "http://localhost:8081/ts/user/saveprofilechange",
                        headers: { token: localStorage.getItem("token") || "" },
                        data: qs.stringify({
                            ...this.userInfo,
                            username: this.userForm.user,
                        }),
                    }).then((res) => {
                        this.$message.success("修改成功");
                        this.updateUser(res.data.respData);
                        this.userForm.user = "";
                    });
                } else {
                    return false;
                }
            });
        },
        //修改密码
        passUpdate() {
            this.$refs.passForm.validate(async (v) => {
                if (v) {
                    this.$axios({
                        method: "post",
                        url: "http://localhost:8081/ts/user/saveprofilechange",
                        headers: { token: localStorage.getItem("token") || "" },
                        data: qs.stringify({
                            ...this.userInfo,
                            password: this.passForm.password,
                        }),
                    }).then((res) => {
                        this.$message.success("修改成功");
                        this.updateUser({});
                        this.$router.push("/");
                        this.passForm.password = "";
                        this.passForm.password2 = "";
                    });
                } else {
                    return false;
                }
            });
        },
        //上传成功的回调
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);

            if (res.code) {
                return this.$message.error(res.msg);
            }

            console.log(res);

            //提示
            this.$message.success("头像修改完成！");
            //更新vuex数据
            this.updateUser(res.respData.userInfo);
        },

        //上传之前的回调
        beforeAvatarUpload(file) {
            let fileType = file.type;
            const isLt2M = file.size / 1024 / 1024 < 2;
            const isJPG = /^image\/(jpeg|png)$/.test(fileType);

            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG,PNG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 2MB!");
            }
            return isJPG && isLt2M;
        },
    },

    created() {
        if (!this.$store.state.userInfo.serial) {
            this.$message.warning("暂未登录");
            this.$router.push("/");
        }
        console.log(this.$store.state.userInfo);
    },
};
</script>

<style lang="less" scoped>
#User {
    flex: 1;

    article {
        border-radius: 15px;
        box-sizing: border-box;
        width: 100%;
        margin-bottom: 15px;
        box-shadow: 0 0 4px #ddd;
        padding: 25px 20px;
        background-color: #fff;

        h2 {
            margin-bottom: 15px;
            font-size: 20px;
            letter-spacing: 3px;
            line-height: 24px;
            border-left: 5px solid #73b899;
            text-indent: 10px;
        }
    }

    /deep/ .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        margin-top: 10px;
    }
    /deep/ .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }
    /deep/ .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    /deep/ .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
}
</style>
